<!-- 关联题目 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="1200px"
    append-to-body
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <!-- 搜索区域 -->
    <el-form
      :model="queryParams"
      inline
      size="small"
      label-width="80px"
      style="margin-bottom: 15px"
    >
      <el-form-item label="题目">
        <el-input
          v-model="queryParams.questionName"
          placeholder="请输入题目关键词"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker
          v-model="queryParams.rangeTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          clearable
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item label="创建人">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入创建人"
          clearable
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="questionList"
      ref="table"
      @selection-change="handleSelectionChange"
      style="width: 100%"
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="题型"
        align="center"
        width="100"
        prop="questionType"
      >
        <template slot-scope="scope">
          <span>{{ dict.question_type[Number(scope.row.questionType)] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="题目"
        align="center"
        min-width="600"
        prop="questionName"
      />
      <el-table-column
        label="创建时间"
        align="center"
        width="180"
        prop="createTime"
      />
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getListInfo } from "@/api/examination/question";

export default {
  name: "RelateQuestionDialog",
  props: {
    questionType: {
      type: String,
      required: true,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    dict: {
      type: Object,
      default: () => {},
    },
    questionGroupId: {
      type: String,
    },
  },
  data() {
    return {
      dialogTitle: "关联题目",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        questionName: "",
        rangeTime: [],
        createBy: "",
        questionType: null, // 将由父组件传入
      },
      questionList: [],
      total: 0,
      selectedRows: [],
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.getList();
      }
    },
    questionType(newVal) {
      // 当 groupType 变化时，更新查询参数
      this.queryParams.questionType = newVal;
    },
  },
  methods: {
    getList() {
      const params = { ...this.queryParams };
      params.questionType = this.questionType; // 关键：按题组类型过滤
      params.relateGroupId = this.questionGroupId;

      getListInfo(params).then((response) => {
        this.questionList = response.rows;
        this.total = response.total;
      });
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      // 将时间范围拆分为 start 和 end
      if (this.queryParams.rangeTime) {
        this.queryParams.createStartTime = this.queryParams.rangeTime[0];
        this.queryParams.createEndTime = this.queryParams.rangeTime[1];
      }
      this.getList();
    },

    resetQuery() {
      // 重置查询参数到初始状态
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        questionName: "",
        rangeTime: [],
        createBy: "",
        questionType: this.questionType, // 保持当前题型过滤条件
      };
      this.handleQuery();
    },

    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },

    cancel() {
      this.$emit("update:visible", false);
      this.reset();
    },

    confirm() {
      this.$emit("confirm", this.selectedRows);
      this.cancel();
    },

    handleClose() {
      this.reset();
    },

    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        questionName: "",
        rangeTime: [],
        createBy: "",
      };
      this.questionList = [];
      this.total = 0;
      this.selectedRows = [];
      this.$emit("update:visible", false);
    },
  },
};
</script>